﻿Type.registerNamespace('OpenPhotoAlbum.Controls');

OpenPhotoAlbum.Controls.TabPanels = function(element) {
	OpenPhotoAlbum.Controls.TabPanels.initializeBase(this, [element]);

	this._tabPanelItemArray = null;
	this._panelContainer = null;
	this._longLine = null;
	//this._startingSymbol = null;

	this._TabPanelItemList = null;
}

OpenPhotoAlbum.Controls.TabPanels.prototype = {

	initialize: function() {
		OpenPhotoAlbum.Controls.TabPanels.callBaseMethod(this, 'initialize');

		//this._startingSymbol = '<span style="text-decoration:none; color:black">&gt;&nbsp;</span>';

		this._tabPanelItemArray =
			Sys.Serialization.JavaScriptSerializer.deserialize(this._TabPanelItemList);

		// add main containers
		//
		var html = '';

		var tabContainerId = this._element.id + '_tabContainer';
		html += String.format('<div id="{0}" class="tabContainer"></div>', tabContainerId);

		var panelContainerId = this._element.id + '_panelContainer';
		html += String.format('<div id="{0}" class="panelContainer"></div>', panelContainerId);

		this._element.innerHTML = html;

		// add content to main containers
		//
		var html = '';
		this._panelContainer = $get(panelContainerId);

		// decorate the tabs first
		var longLineId = this._element.id + '_longLine';
		html += String.format('<div class="longLine" id="{0}">&nbsp;</div>', longLineId);
		html += '<div class="tabs">';
		html += '<span class="left">&nbsp;&nbsp;</span>';

		for (var i = 0; i < this._tabPanelItemArray.length; i++) {

			// step 1: compile the tabs
			//
			var item = this._tabPanelItemArray[i];
			var tabId = this._element.id + '_t' + i;
			var className = 'itemNormal';
			if (item.Visible) { className = 'itemSelected'; }
			html += String.format(
				'<a id="{0}" panelId="{1}" class="{2}">{3}</a>',
				tabId, item.PanelClientId, className, item.Name);

			// step 2: move the real panel
			//
			var panel = $get(item.PanelClientId);
			if (panel) {
				//panel.parentElement.removeChild(panel);
				this._panelContainer.appendChild(panel);
			}
			if (item.Visible) { panel.style.display = ''; }
			else { panel.style.display = 'none'; }
		}

		// finish decorating the tabs
		html += '</div>';

		$get(tabContainerId).innerHTML = html;

		this._longLine = $get(longLineId);

		this._updatePanelContainerVisibility();

		// hook events
		//
		for (var i = 0; i < this._tabPanelItemArray.length; i++) {
			var tabId = this._element.id + '_t' + i;
			var tab = $get(tabId);
			if (!tab) { continue; }
			$addHandler(tab, 'click', Function.createDelegate(this, this._onClick));
		}
	},

	dispose: function() {

		OpenPhotoAlbum.Controls.TabPanels.callBaseMethod(this, 'dispose');
	},

	_onClick: function(sender, e) {
		//var panelId = sender.target.panelId;
		var panelId = $(sender.target).attr('panelId');
		for (var i = 0; i < this._tabPanelItemArray.length; i++) {
			var item = this._tabPanelItemArray[i];
			var tabElement = $get(this._element.id + '_t' + i);
			var panel = $get(item.PanelClientId);
			if (item.PanelClientId == panelId) {
				if (panel.style.display == 'none') {
					panel.style.display = '';
					tabElement.className = 'itemSelected';
				}
				else {
					panel.style.display = 'none';
					tabElement.className = 'itemNormal';
				}
			}
			else {
				panel.style.display = 'none';
				tabElement.className = 'itemNormal';
			}
		}

		this._updatePanelContainerVisibility();
	},

	_updatePanelContainerVisibility: function() {
		for (var i = 0; i < this._tabPanelItemArray.length; i++) {
			var item = this._tabPanelItemArray[i];
			var panel = $get(item.PanelClientId);
			if (panel && panel.style.display != 'none') {
				this._panelContainer.style.display = '';
				this._longLine.style.display = '';
				return;
			}
		}
		this._panelContainer.style.display = 'none';
		this._longLine.style.display = 'none';
	},

	get_TabPanelItemList: function() { return this._TabPanelItemList; },
	set_TabPanelItemList: function(value) { this._TabPanelItemList = value; }
}

OpenPhotoAlbum.Controls.TabPanels.registerClass('OpenPhotoAlbum.Controls.TabPanels', AjaxControlToolkit.ControlBase);
